<ui:composition template="templateProveedor.xhtml"
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui"> 

	<ui:define name="cdRegistro">
	
	<div class="well">
	<!-- <h1 id="forms">Nuevo contenido digital</h1> -->
		<h:form enctype="multipart/form-data" id="form" styleClass="bs-example form-horizontal">
				
			<fieldset>
			
			<h1><legend>Contenido Digital   ·   Registro</legend></h1>
											
			<p:growl id="mensajes" showDetail="false" life="2000" sticky="true" autoUpdate="true"/>

			<div class="form-group">
				<h:outputLabel value="Logo " styleClass="control-label col-lg-2"/>
				<div class="col-lg-8 row-lg-3">
					<div class="input-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>
						<p:fileUpload fileUploadListener="#{utilsBean.subirImagen}" 
										allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/" 
										update="mensajes" sizeLimit="10000000" auto="true" multiple="false"
										cancelLabel="Cancelar" label="Seleccionar" uploadLabel="Confirmar" 
										fileLimit="1" dragDropSupport="true" 
										fileLimitMessage="Puede Ingresar soloamente 1 logo"/>
					</div>
				</div>
			</div>

			<div class="form-group">
				<h:outputLabel value="Nombre " styleClass="control-label col-lg-2"/>
				<div class="col-lg-8">
					<div class="input-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-font"></span></span>
						<p:inputText label="Nombre" placeholder="Nombre" styleClass="form-control" 
									required="true" requiredMessage="Debe ingresar el nombre del Contenido Digital"
									value="#{versionBean.contenido.nombre}" />
					</div>
				</div>
			</div>

			<div class="form-group">
				<h:outputLabel value="Descripcion" styleClass="control-label col-lg-2"/>
				<div class="col-lg-8">
					<div class="input-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-font"></span></span>
						<p:inputTextarea label="Descripcion" placeholder="Descripcion" styleClass="form-control"
										required="true" requiredMessage="Debe ingresar la descripcion del Contenido Digital"
										value="#{versionBean.contenido.descripcion}" />
					</div>
				</div>
			</div>

			<div class="form-group">		            
		  		<h:outputLabel value="Subcategoria " styleClass="control-label col-lg-2"/>
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-list"></span></span>
						<h:selectOneMenu label="Subcategoria" id="subcat" 
										value="#{versionBean.contenido.subcategoria.nombre}" effect="fade" styleClass="form-control"
										required="true" requiredMessage="Debe seleccionar la subcategoria del Contenido Digital" >
							<f:selectItem itemLabel="Seleccionar Subcategoria..." itemValue="" />
				            <f:selectItems value="#{subcategoriaBean.subcategorias}" var="sc" itemLabel="#{sc.nombre}" itemValue="#{sc.nombre}" />
				        </h:selectOneMenu>
			        </div>
				</div>
		        <h:outputLabel value="Filtrar por Categoria: " styleClass="control-label col-lg-2"/>
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-filter"></span></span>
			            <h:selectOneMenu label="Categoria" id="categoria" value="#{subcategoriaBean.categoria.nombre}" effect="fade" styleClass="form-control">
			            	<f:selectItem itemLabel="Seleccionar Categoria..." itemValue="" />
			                <f:selectItems value="#{subcategoriaBean.categoriasConSubcategorias}" var="categoria" itemLabel="#{categoria.nombre}" itemValue="#{categoria.nombre}"/>
			                <p:ajax update="subcat" listener="#{subcategoriaBean.getSubcategoriasPorCategoria}" />
			            </h:selectOneMenu>
					</div>
				</div>
			</div>

			<div class="form-group">
				<h:outputLabel value="Imaganes... " styleClass="control-label col-lg-2"/>
				<div class="col-lg-8 row-lg-3">
					<div class="input-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>
						<p:fileUpload fileUploadListener="#{utilsBean.subirMultiplesImagenes}"
										allowTypes="/(\.|\/)(gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/" 
										update="mensajes" sizeLimit="10000000" auto="false" dragDropSupport="true"
										multiple="true" fileLimit="5"
										cancelLabel="Cancelar" label="Seleccionar" uploadLabel="Confirmar" 
										fileLimitMessage="Puede Ingresar soloamente 5 imaganes" />
					</div>
				</div>
			</div>
			
			<div class="form-group">
				<h:outputLabel value="Link video" styleClass="control-label col-lg-2"/>
				<div class="col-lg-8">
					<div class="input-group" >
						<span class="input-group-addon">
							<span class="glyphicon glyphicon-film"></span>
							<span style="font-family: 'Lato'; font-size: 9px; padding:10px;"> http://www.youtube.com/watch?v= </span>
						</span>
						<p:inputText label="Video" value="#{versionBean.contenido.video}" placeholder="Video..." styleClass="form-control" />
					</div>
					<div style="font-size:10px; text-align:right;"><h:outputLabel>Si el link es: http://www.youtube.com/watch?v=47dtFZ8CFo8, debe ingresar 47dtFZ8CFo8</h:outputLabel></div>
				</div>
				
			</div>
			
			
			<!-- //////////////////////////////////////// ACA EMPIEZA EL FORM DE LA VERSION //////////////////////////////////////// -->
						

			<h3 class="text-muted" style="padding: 20px;">Version</h3>
			
			<div class="form-group">
				<h:outputLabel value="Archivo" styleClass="control-label col-lg-2"/>
				<div class="col-lg-8">
					<div class="input-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-picture"></span></span>
						<p:fileUpload fileUploadListener="#{utilsBean.subirArchivo}" 
									allowTypes="/(\.|\/)(apk|pdf|mp3|txt|APK|PDF|MP3|TXT|gif|jpg|jpeg|gif|png|PNG|GIF|JPG|JPEG)$/"
									cancelLabel="Cancelar" label="Seleccionar" uploadLabel="Confirmar"
									multiple="false" fileLimit="1"
									validatorMessage="Debe ingresar el archivo correspondiente a la version"
									fileLimitMessage="Puede ingresar solamente un archivo" 
									invalidFileMessage="No se permite este tipo de archivos"								
									required="true" requiredMessage="Debe ingresar el archivo correspondente a la version" 
									update="mensajes" sizeLimit="1000000000" auto="true" dragDropSupport="true" />
					</div>
				</div>
			</div>

			<div class="form-group">
				<h:outputLabel value="Nombre " styleClass="control-label col-lg-2"/>
				<div class="col-lg-8">
					<div class="input-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-font"></span></span>
						<p:inputText label="Nombre" placeholder="Nombre de version" styleClass="form-control"
								value="#{versionBean.nombre}" />
					</div>
				</div>
			</div>

			<div class="form-group">
				<h:outputLabel value="Numero" styleClass="control-label col-lg-2"/>
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-addon">N°</span>
						<p:inputText label="Numero" placeholder="0" styleClass="form-control"
									required="true" requiredMessage="Debe ingresar el numero correspondiente a la version" 
									value="#{versionBean.numero}" />
					</div>
				</div>
				<h:outputLabel value="Precio " styleClass="control-label col-lg-2"/>
				<div class="col-lg-3">
					<div class="input-group">
						<span class="input-group-addon"><span class="glyphicon glyphicon-usd"></span></span>				
						<p:inputText label="Precio" placeholder="0.00" styleClass="form-control"
								required="true" requiredMessage="Debe ingresar el precio correspondiente a la version" 
								value="#{versionBean.precio}" />
					</div>
				</div>				
			</div>

			<div class="form-group" style="text-align:center; margin: auto;">
				<br />
				<h:commandButton id="cancelar" value="Cancelar" update="mensajes"
		             actionListener="#{contenidoDigitalBean.listarContenidosProveedor()}" styleClass="btn btn-default btn-lg" style="margin:10px;"/>
						             
	         	<h:commandButton id="registro" value="Registrar" update="mensajes"
		             actionListener="#{versionBean.postRegistroVersionCD}" styleClass="btn btn-primary btn-lg" style="margin:10px;"/>
			</div>
		             
			</fieldset>
		
		</h:form>
	</div>
	
	</ui:define>
</ui:composition>